<template>
  <div class="pet-detail">
    <h1>{{ pet.name }}</h1>
    <div class="pet-image">
      <img :src="pet.image" alt="宠物" />
    </div>
    <h2>{{ pet.type }}</h2>
    <p><strong>体重:</strong> {{ pet.weight }}kg</p>
    <p><strong>身高:</strong> {{ pet.height }}cm</p>
    <h3>详细介绍</h3>
    <p>{{ pet.description }}</p>
    <h3>领养要求</h3>
    <p>{{ pet.adoptionRequirements }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      pet: {},
    };
  },
  created() {
    const petId = this.$route.params.id; // 获取宠物 ID 从 URL
    this.fetchPetDetails(petId); // 根据 ID 获取宠物详细信息
  },
  methods: {
    fetchPetDetails(id) {
      // 在这里最好从后端 API 获取数据，以下是一个示例数据
      const pets = [
        {
          id: 1,
          name: "金毛寻回犬",
          type: "犬",
          height: 60,
          weight: 30,
          description: "聪明友善，适合家庭。",
          image: require("../assets/dog11.png"),
          adoptionRequirements: "需要有适合的空间和注意力。",
        },
        {
          id: 2,
          name: "拉布拉多",
          type: "犬",
          height: 65,
          weight: 35,
          description: "活泼，忠诚，友好。",
          image: require("../assets/dog11.png"),
          adoptionRequirements: "喜欢运动，需要每天遛弯。",
        },
        {
          id: 3,
          name: "英国短毛猫",
          type: "猫",
          height: 25,
          weight: 5,
          description: "性格温和，可爱。",
          image: require("../assets/dog11.png"),
          adoptionRequirements: "适合有小孩的家庭。",
        },
        {
          id: 4,
          name: "波斯猫",
          type: "猫",
          height: 20,
          weight: 4,
          description: "毛发绒密，喜欢安静。",
          image: require("../assets/dog11.png"),
          adoptionRequirements: "需要定期梳毛。",
        },
      ];

      this.pet = pets.find((pet) => pet.id === parseInt(id)); // 根据 ID 查找宠物
    },
  },
};
</script>

<style>
.pet-detail {
  text-align: center;
}
.pet-image img {
  max-width: 100%;
  height: auto;
  border-radius: 10px;
}
</style>
